import React, {FC} from "react";
import type {MenuProps} from 'antd';
import {Menu} from 'antd';

import {PhatList} from '../utils';
import {inject, observer} from "_mobx-react@6.3.1@mobx-react";
import {useLocation, useNavigate} from "react-router-dom";

type MenuItem = Required<MenuProps>['items'][number];

function getItem(
    label: React.ReactNode,
    key: React.Key,
    children?: MenuItem[],
    type?: 'group',
): MenuItem {
    return {
        key,
        children,
        label,
        type,
    } as MenuItem;
}


const Navigation: FC<any> = ({MobxData}) => {
    const location = useLocation()
    // 默认菜单
    const [openKeys, setOpenKeys] = React.useState([location.pathname.split('/').slice(0, 3).join("/")]);

    // mobx数据
    const {userInfo, changeUserInfo} = MobxData;

    const navigate = useNavigate();


    // 菜单项
    const items: MenuItem[] = [];

    // 动态渲染菜单
    const assemblyData = (list: any, status = true) => {
        let tempArr = []
        for (let i = 0; i < list.length; i++) {
            if (status) {
                /*
                    用户权限处理
                    PhatList 带一个 permission 参数，用来判断用户是否有权限访问
                    当用户权限 role(MobxData 的 userInfo.role >= permission) 时才会渲染菜单

                    userInfo.role >= permission
                    userInfo.role<=notAllowed

                    userInfo.role, list[i].permission
                */
                // console.log(userInfo.role, list[i].permission, list[i].label)
                if (userInfo.role >= list[i].permission && userInfo.role <= list[i].notAllowed) {
                    if (list[i].children) {
                        items.push(getItem(list[i].label, list[i].key, assemblyData(list[i].children, false)))
                    } else {
                        items.push(getItem(list[i].label, list[i].key))
                    }
                }
            } else {
                if (userInfo.role >= list[i].permission && userInfo.role <= list[i].notAllowed) {
                    tempArr.push(getItem(list[i].label, list[i].key))
                }
                if (i >= list.length - 1) {
                    return tempArr
                }
            }
        }
    }
    assemblyData(PhatList)

    // 一级子菜单键值
    const rootSubmenuKeys = items.map(item => item!.key);

    // 只展开一个一级菜单
    const onOpenChange: MenuProps['onOpenChange'] = keys => {
        const latestOpenKey: any = keys.find(key => !openKeys.includes(key));
        rootSubmenuKeys.includes(latestOpenKey) ? setOpenKeys(latestOpenKey ? [latestOpenKey] : []) : setOpenKeys(keys)
    };

    return (
        <Menu
            mode="inline"
            defaultSelectedKeys={[location.pathname]}
            selectedKeys={[location.pathname]}
            openKeys={openKeys}
            onOpenChange={onOpenChange}
            style={{width: '100%'}}
            onClick={(value) => {
                navigate(value.key)
            }}
            items={items}
        />
    );
}
export default inject('MobxData')(observer(Navigation));